<template>
  <div :class="['sidebox',{'hidden':!$store.state.statusSiderLeft}]">
    <el-menu :default-active="$store.state.editableTabsValue" class="menubox" :collapse="isCollapse" @open="handleOpen"
      @close="handleClose" :collapse-transition="false" :router="true">
      <template v-for="menu in menuList" :key="menu.name">
        <el-sub-menu :index="menu.name" v-if=" menu.children && menu.children.length>0">
          <template #title>
            <img :src="`${baseurl}images/menuicons/${menu.path}.png`" style="padding: 0 5px;">
            <span>{{menu.name}}</span>
          </template>
          <el-menu-item :index="item.path" @click="selectMenu(item)" v-for="item in menu.children" :key="item.name">
            <template #title>
              <img :src="`${baseurl}images/menuicons/${item.path}${$store.state.editableTabsValue == item.path ? '-active' : ''}.png`" style="padding: 0 5px;">
              <span>{{item.name}}</span>
            </template>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item :index="menu.path" @click="selectMenu(menu)" v-else>
          <img :src="`${baseurl}images/menuicons/${menu.path}${$store.state.editableTabsValue == menu.path ? '-active' : ''}.png`" style="padding: 0 5px;">
          <template #title><span>{{menu.name}}</span></template>
        </el-menu-item>
      </template>

    </el-menu>
  </div>
</template>

<script>
import { ref, reactive, onMounted, watch, toRefs, computed } from "vue"; // ref 为我们的值创建了一个响应式引用
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import { HomeFilled, Menu as IconMenu, Setting } from "@element-plus/icons-vue";
export default {
  components: {
    HomeFilled,
    IconMenu,
    Setting
  },
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    } ,
  },
  setup(props, ctx) {
    const $router = useRouter()
    const $route = useRoute()
    const $store = useStore();
    const selectedMenu = ref("");
    const menuList = ref(window.menulist);
    const handleOpen = (key, keyPath) => {
    };
    const handleClose = (key, keyPath) => {
    };
    const selectMenu = (item) => {
      //$router.push(item.path);
      //selectedMenu.value = item.path;
      if ($store.state.editableTabsValue == item.path) {
        // debugger
        // 解决重复点击问题
      } else {
        //selectedMenu.value = item.path;
        $store.commit("addTab", item);
      }

    };

    // const state = reactive({
    //   menuList: [],
    // });
    const baseurl = import.meta.env.BASE_URL

    const getml = () => {
        
    };
    onMounted(() => {
      getml();
    })

    return {
      selectedMenu,
      selectMenu,
      handleOpen,
      handleClose,
      baseurl,
      menuList
    };
  },
};
</script>

<style scoped>
div.sidebox {
  width:12vw;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: rgb(249,250,251);
  position: absolute;
  transition: left 0.3s;
  z-index: 1;
}

div.sidebox.hidden {
  left: -12vw;
}

.el-menu-vertical-demo {
  height: 100%;
}
:deep(.el-menu-item) {
}
:deep(.el-sub-menu__title) {
  line-height: 20px !important;
  height: 54px !important;
  /* color: #ffffff !important; */
  color: #595959 !important;
}
:deep(.el-menu) {
  --el-menu-bg-color: transition !important;
  --el-menu-item-font-size: none !important;
  --el-menu-border-color: none !important;
  
}
:deep(.el-menu-item.is-active) {
  background-color: #2847C8;
  color: #FFFFFF !important;
}
.el-menu-item {
  color: #595959 !important;
  height: 1.9791666667vw !important;
  border-radius: 0.317vw !important;
}
.el-menu-item:hover {
  background-color: #2847C8;
  color: #FFFFFF !important;
}
:deep(.el-sub-menu__title:hover) {
  background-color: #FFF !important;
}
:deep(.el-sub-menu__title) {
  height: 1.9791666667vw !important;
  border-radius:8px !important;
}
.menubox {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.menubox>li {
  margin: 10px 0px;
  border-radius: 8px !important;
}
</style>